<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Carte et Itinéraire (version 3)</title>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
        <link type="text/css" rel="stylesheet" href="css/spectrum.css">
        <link type="text/css" rel="stylesheet" href="css/map-style.css">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/spectrum.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=fr"></script>
        <script type="text/javascript" src="js/map-functions.js"></script>
        <script type="text/javascript" src="js/map-jquery.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <span class="title">Carte et itinéraire</span>
                <div class="research">
                    <input type="text" id="search" value=""> &nbsp;
                    <button class="btn btn-xs">Rechercher</button>
                </div>
            </div>
            <div id="left">
                <span class="title">Points</span>
                <div id='marker-list'>
                    <!-- Liste des marqueurs -->
                </div>
            </div>
            <div id="right">
                <div id="map"></div>
            </div>
            <div id="footer">
                <span class="title">Itinéraires</span>&nbsp;
                (<a href="#" id="itineraire">Ajouter un itinéraire</a>)<br>
                <div id='itinerary-default'>
                    Itinéraire du point <b><span id='defaut-depart'>...</span></b> à <b><span id='defaut-arrivee'>...</span></b> de type
                    <select id='defaut-type'>
                        <option value="0">Avion</option>
                        <option value="1">Randonnée</option>
                        <option value="2">Bateau</option>
                    </select>
                    <a href='#' class="btn btn-primary btn-xs" id='itineraire-defaut'>Tracer l'itinéraire par défaut</a>
                </div>
                <div id='itinerary-by-name'>
                    <label>
                        <span>Itinéraires par nom</span>
                        <input type="text" id="itinerary-name" value="">
                    </label>
                    <em>Veuillez séparer par un <b>;</b> (point virgule) le nom des destinations</em>
                    <select id='name-type'>
                        <option value="0">Avion</option>
                        <option value="1">Randonnée</option>
                        <option value="2">Bateau</option>
                    </select>
                    <a href="#" class="btn btn-info btn-xs" id='itineraire-nom'>Placer les points</a><br>
                    <div id='itineraire-nom-message'></div>
                </div>
            </div>
            <div id="panel" style="display: none;"></div>
        </div>
    </body>
</html>